<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <app-header></app-header>
    <!-- <app-content></app-content> -->
    
    <Content></Content>
    <app-footer></app-footer>
  </div>
</template>

<script>
// 引入组件
import Header from './components/Header'
import Footer from './components/Footer'
import Content  from './components/Content'
export default {
  name: 'app',
  data(){
    return{
      title:"组件嵌套demo"
    }
  },
  components:{
    'app-header':Header,
    Content,
    'app-footer':Footer
  },
  methods:{
    
  }
  
  
}
</script>

<style scoped>
  h1{
    color:#000;
    text-align: center;
  }
</style>
